<!-- <html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .dall{
            width: 600px;
            margin: 0 auto;
        }
        .dtop {
            display: flex;
            justify-content: space-between;
        }
        .dbody img{
            width: 220px;
        }
        .dbody span{
           
           
        }
    </style>
</head>

<body>
    <div class="dall">
        <div class="dtop">
            <div><img src="./作业html合集/红色播放键.png" alt="">
                <span>热门视频</span>
            </div>
            <div><img src="./作业html合集/红色刷新键.png" alt="">
                <span>换一换</span>
            </div>
        </div>
        <div class="dbody">
            <img src="./作业html合集/fish.jpeg" alt=""><span>无论做什么鱼：最忌放盐和料酒腌制，大厨教你...</span><span>1万评论</span><div><span>148万次观看</span><span>司马南频道</span></div>
            <img src="./作业html合集/fish.jpeg" alt=""><span>无论做什么鱼：最忌放盐和料酒腌制，大厨教你...</span><span>1万评论</span><div><span>148万次观看</span><span>司马南频道</span></div>
            <img src="./作业html合集/fish.jpeg" alt=""><span>无论做什么鱼：最忌放盐和料酒腌制，大厨教你...</span><span>1万评论</span><div><span>148万次观看</span><span>司马南频道</span></div>
            <img src="./作业html合集/fish.jpeg" alt=""><span>无论做什么鱼：最忌放盐和料酒腌制，大厨教你...</span><span>1万评论</span><div><span>148万次观看</span><span>司马南频道</span></div>
            
        </div>
    </div>
</body>

</html> -->

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .box {
            width: 390px;
            height: 844px;
            margin: 0 auto;
            border: 1px solid;
        }

        .box>div {
            border-bottom: 1px solid;
        }

        .search {
            height: 45px;
            display: flex;
        }

        .ad {
            height: 80px;
        }

        .menu {
            height: 75px;
            display: flex;
        }

        .hotel {
            height: 270px;
        }

        .wifi {
            height: 120px;
        }

        .at {
            height: 60px;
        }

        .ggl {
            height: 320px;
        }

        .s1 {
            width: 328px;
            height: 28px;
            border: 1px solid;
            border-radius: 5px;

        }

        .sl {
            width: 345px;
            height: 45px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .s2 {
            background: url('https://oss.9ihub.com/test/xiecheng-sprite.png') no-repeat -59px -195px;
            background-size: 104px 328px;
            width: 25px;
            height: 25px;
        }

        .sr {
            width: 45px;
            height: 45px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

        }

        .sr span {
            height: 14px;
            font-size: 14px;
            ;
        }

        .menu [class^='m'] {
            width: 35px;
            height: 35px;
            border: 1px solid;
            display: flex;

        }

        .menu>div {
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-direction: column;
        }

        .menu span {
            width: 55px;
            height: 14px;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="search">
            <div class="sl">
                <div class="s1"></div>
            </div>
            <div class="sr">
                <div class="s2"></div><span>我的</span>
            </div>
        </div>
        <div class="ad"></div>
        <div class="menu">
            <div>
                <div class="m1"></div><span>景点·玩乐</span>
            </div>
            <div>
                <div class="m2"></div><span>景点·玩乐</span>
            </div>
            <div>
                <div class="m3"></div><span>景点·玩乐</span>
            </div>
            <div>
                <div class="m4"></div><span>景点·玩乐</span>
            </div>
            <div>
                <div class="m5"></div><span>景点·玩乐</span>
            </div>
        </div>
        <div class="hotel"></div>
        <div class="wifi"></div>
        <div class="at"></div>
        <div class="ggl"></div>
        <div class="ggr"></div>
    </div>
</body>

</html>